/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-12-15 Time: 23:16
 *
 * 新建服务工单
 */

import React, {Component} from 'react';
import {
    SafeAreaView,
    View,
    Text,
    TouchableOpacity,
    ScrollView,
    TextInput,
    Image
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './CreateServiceOrderScreen.Style';
import {
    COLOR_THEME, FONT_COLOR_SUB_TITLE,
    FONT_COLOR_TITLE, FONT_SIZE_TITLE
} from "../../../../constant/PHColors"
import AntDesign from "react-native-vector-icons/AntDesign"
import EvilIcons from "react-native-vector-icons/EvilIcons"
import DividingLineViewComponent from "../../../../component/DividingLineViewComponent/DividingLineViewComponent"
import BottomButtonView from "../../../../component/BottomButtonView/BottomButtonView"

class CreateServiceOrderScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        title: '新建服务工单'
    })

    render(): React.ReactNode {
        return (
            <SafeAreaView style={styles.body}>
                <ScrollView style={styles.body}>

                    <DividingLineViewComponent lineHeight={10}/>

                    {/* 服务地点 */}
                    <View style={{backgroundColor: '#FFF'}}>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                            this.props.navigation.navigate('RepairWorkOrderChoosePlaceScreen')
                        }}>
                            <View style={styles.itemHeader}>
                                <View style={styles.itemHeaderLeft}>
                                    <AntDesign name={'enviromento'} size={17} style={{color: FONT_COLOR_SUB_TITLE,}}/>
                                    <Text style={styles.itemHeaderText}>
                                        服务地点
                                    </Text>
                                    {
                                        false &&
                                        <AntDesign name={'check'} size={14} style={{color: COLOR_THEME, marginLeft: 10}}/>
                                    }
                                </View>
                                <View style={styles.itemHeaderRight}>
                                    <AntDesign name={'right'} size={14} style={{color: FONT_COLOR_SUB_TITLE}}/>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <DividingLineViewComponent lineHeight={1}/>

                        <View style={{margin: 15}}>
                            <TextInput
                                placeholder={'填写服务地点'}
                                style={{
                                    fontSize: FONT_SIZE_TITLE,
                                    padding: 0
                                }}
                                numberOfLines={1}
                                underlineColorAndroid={'transparent'}
                                onChangeText={text => {

                                }}
                            />
                        </View>

                    </View>

                    <DividingLineViewComponent lineHeight={10}/>

                    {/* 服务对象 */}
                    {
                        <View style={{backgroundColor: '#FFF'}}>
                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                this.props.navigation.navigate('RepairWorkOrderChoosePersonScreen')
                            }}>
                                <View style={styles.itemHeader}>
                                    <View style={styles.itemHeaderLeft}>
                                        <AntDesign name={'tago'} size={17} style={{color: FONT_COLOR_SUB_TITLE,}}/>
                                        <Text style={styles.itemHeaderText}>
                                            服务内容
                                        </Text>
                                        {
                                            false &&
                                            <AntDesign name={'check'} size={14} style={{color: COLOR_THEME, marginLeft: 10}}/>
                                        }
                                    </View>
                                    <View style={styles.itemHeaderRight}>
                                        <AntDesign name={'right'} size={14} style={{color: FONT_COLOR_SUB_TITLE}}/>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        </View>
                    }

                    <DividingLineViewComponent lineHeight={10}/>

                    {/* 处理人 */}
                    {
                        <View style={{backgroundColor: '#FFF'}}>
                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                this.props.navigation.navigate('')
                            }}>
                                <View style={styles.itemHeader}>
                                    <View style={styles.itemHeaderLeft}>
                                        <AntDesign name={'user'} size={17} style={{color: FONT_COLOR_SUB_TITLE,}}/>
                                        <Text style={styles.itemHeaderText}>
                                            处理人
                                        </Text>
                                        {
                                            false &&
                                            <AntDesign name={'check'} size={14} style={{color: COLOR_THEME, marginLeft: 10}}/>
                                        }
                                    </View>
                                    <View style={styles.itemHeaderRight}>
                                        <AntDesign name={'right'} size={14} style={{color: FONT_COLOR_SUB_TITLE}}/>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        </View>
                    }

                    <DividingLineViewComponent lineHeight={10}/>

                    {
                        <View style={{backgroundColor: '#FFF'}}>
                            <View style={styles.itemHeader}>
                                <View style={styles.itemHeaderLeft}>
                                    <AntDesign name={'edit'} size={17} style={{color: FONT_COLOR_SUB_TITLE,}}/>
                                    <Text style={styles.itemHeaderText}>
                                        备注信息
                                    </Text>
                                    {
                                        false &&
                                        <AntDesign name={'check'} size={14} style={{color: COLOR_THEME, marginLeft: 10}}/>
                                    }
                                </View>
                                <View style={styles.itemHeaderRight}>
                                    <Text style={{fontSize: FONT_SIZE_TITLE, color: 'red'}}>
                                        100
                                        <Text style={{fontSize: FONT_SIZE_TITLE, color: FONT_COLOR_SUB_TITLE}}>
                                            /100
                                        </Text>
                                    </Text>
                                </View>
                            </View>

                            <DividingLineViewComponent lineHeight={1}/>

                            <View style={{margin: 15, height: 120}}>
                                <TextInput
                                    placeholder={'输入备注信息'}
                                    multiline={true}
                                    maxLength={100}
                                    style={{
                                        fontSize: FONT_SIZE_TITLE,
                                        padding: 0
                                    }}
                                    underlineColorAndroid={'transparent'}
                                    onChangeText={text => {

                                    }}
                                />
                            </View>
                        </View>
                    }

                </ScrollView>

                <BottomButtonView title={'完成'} onSubmitClick={() => {

                }}/>
            </SafeAreaView>
        )
    }

    _onSubmitClick() {

    }

}

const props = state => {
    return {}
}

export default CreateServiceOrderScreen = connect(props)(CreateServiceOrderScreen);
